/* eslint-disable max-len */
import React from 'react';
import { View } from '@ray-js/ray';
import { useCreation } from 'ahooks';
import Svg from '@ray-js/svg';
import { globalConfig } from '@/config';
import { FamilyIconType } from '@/utils';

interface IPasswordIcon {
  type: number;
  size?: number;
}

const familyTypeMap: { [key: string]: FamilyIconType } = {
  unlock_card: FamilyIconType.card,
  unlock_password: FamilyIconType.password,
  unlock_fingerprint: FamilyIconType.fingerprint,
  unlock_face: FamilyIconType.face,
  unlock_finger_vein: FamilyIconType.fingerVein,
  unlock_hand: FamilyIconType.hand,
};

const FamilyIcon: React.FC<IPasswordIcon> = ({ size, type }) => {
  const themeColor = globalConfig.getConfig('themeColor') as string;
  const icons = useCreation(() => {
    return {
      [FamilyIconType.fingerprint]: (
        <Svg width="44" height="44" viewBox="0 0 44 44">
          <path
            d="M15.3101 10.9075C15.4304 10.7872 15.5059 10.622 15.5105 10.4426C15.5768 7.8715 13.5379 5.83263 10.9645 5.89665C9.4191 5.93648 7.91683 6.70834 7.14018 7.86139C6.51641 8.78987 6.40553 9.8821 6.82866 10.9422C7.67603 13.7334 7.35346 15.6378 7.08457 16.5295C6.97909 16.877 7.17222 17.2305 7.5147 17.3182C7.85718 17.4059 8.22116 17.1943 8.32664 16.8469C8.70857 15.5822 8.97267 13.4495 8.06553 10.4805L8.0462 10.4282C7.76949 9.75042 7.82476 9.12157 8.20483 8.5533C8.73058 7.77214 9.82475 7.22913 10.9263 7.20304C12.7799 7.15527 14.2519 8.62729 14.2042 10.4809C14.1949 10.8397 14.4795 11.1242 14.8382 11.115C15.0247 11.1033 15.1898 11.0278 15.3101 10.9075Z"
            fill={themeColor}
          />
          <path
            d="M14.9774 17.4117C15.0834 17.3057 15.1478 17.1582 15.1478 16.9961L15.1486 13.0025C15.1486 12.6784 14.8848 12.4146 14.5607 12.4146C14.2365 12.4147 13.9726 12.6786 13.9725 13.0027L13.9718 16.9963C13.9717 17.3204 14.2356 17.5843 14.5597 17.5842C14.7239 17.5821 14.8714 17.5177 14.9774 17.4117Z"
            fill={themeColor}
          />
          <path
            d="M5.53395 15.1481C5.64521 15.0368 5.72095 14.89 5.7354 14.7245C5.77669 14.2923 5.79119 13.8381 5.77401 13.3711C5.75879 12.9866 5.72816 12.5819 5.67474 12.1734C5.63096 11.8219 5.306 11.5916 4.94858 11.6603C4.59116 11.729 4.34202 12.067 4.38803 12.4207C4.43566 12.7951 4.46539 13.1562 4.47956 13.5018C4.49391 13.9139 4.48354 14.3107 4.44636 14.6855C4.412 15.0441 4.67289 15.3428 5.03004 15.3544C5.22246 15.3574 5.40374 15.2783 5.53395 15.1481Z"
            fill={themeColor}
          />
          <path
            d="M17.7558 14.6186C17.8633 14.5111 17.9275 14.3603 17.9253 14.1936L17.8684 9.78639C17.8442 7.98332 17.1187 6.27979 15.8262 4.98731C14.5337 3.69484 12.8302 2.96929 11.0271 2.94515C9.04461 2.91859 7.07707 3.85129 5.7634 5.44207C4.56531 6.89129 4.10208 8.66648 4.4591 10.4441C4.52543 10.7718 4.84453 10.9939 5.17056 10.9364C5.49659 10.8788 5.70815 10.5676 5.64393 10.2378C5.36014 8.8243 5.73622 7.40038 6.7052 6.2279C7.77927 4.92867 9.43896 4.13496 11.0412 4.15642C12.5116 4.17263 13.9301 4.77612 14.981 5.83251C16.0418 6.89334 16.6373 8.29396 16.6571 9.77231L16.7182 14.1753C16.7217 14.4197 16.8717 14.642 17.0985 14.7389C17.3254 14.8358 17.5846 14.7883 17.7558 14.6186Z"
            fill={themeColor}
          />
          <path
            d="M12.055 18.4521C12.348 15.1466 12.0867 11.7833 11.3563 9.45824C11.2461 9.10455 10.8717 8.89558 10.5245 8.99414C10.1773 9.0927 9.98065 9.45671 10.0931 9.80811C10.7735 11.9729 11.0145 15.1413 10.7346 18.2806C10.702 18.6431 10.9711 18.9766 11.3375 19.0213C11.542 19.0512 11.7374 18.9801 11.873 18.8445C11.9741 18.7434 12.0417 18.6088 12.055 18.4521Z"
            fill={themeColor}
          />
        </Svg>
      ),
      [FamilyIconType.password]: (
        <Svg width="30" height="34" viewBox="0 0 30 34">
          <rect
            fillRule="evenodd"
            clipRule="evenodd"
            x="1.25"
            y="0.75"
            width="12.5"
            height="15.5"
            rx="6.25"
            stroke={themeColor}
            strokeWidth="1.5"
            fill="#fff"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M4.75 6.5C4.33579 6.5 4 6.16421 4 5.75C4 5.33579 4.33579 5 4.75 5C5.16421 5 5.5 5.33579 5.5 5.75C5.5 6.16421 5.16421 6.5 4.75 6.5Z"
            fill={themeColor}
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M7.75 6.5C7.33579 6.5 7 6.16421 7 5.75C7 5.33579 7.33579 5 7.75 5C8.16421 5 8.5 5.33579 8.5 5.75C8.5 6.16421 8.16421 6.5 7.75 6.5Z"
            fill={themeColor}
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M10.75 6.5C10.3358 6.5 10 6.16421 10 5.75C10 5.33579 10.3358 5 10.75 5C11.1642 5 11.5 5.33579 11.5 5.75C11.5 6.16421 11.1642 6.5 10.75 6.5Z"
            fill={themeColor}
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M4.75 9.5C4.33579 9.5 4 9.16421 4 8.75C4 8.33579 4.33579 8 4.75 8C5.16421 8 5.5 8.33579 5.5 8.75C5.5 9.16421 5.16421 9.5 4.75 9.5Z"
            fill={themeColor}
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M7.75 9.5C7.33579 9.5 7 9.16421 7 8.75C7 8.33579 7.33579 8 7.75 8C8.16421 8 8.5 8.33579 8.5 8.75C8.5 9.16421 8.16421 9.5 7.75 9.5Z"
            fill={themeColor}
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M10.75 9.5C10.3358 9.5 10 9.16421 10 8.75C10 8.33579 10.3358 8 10.75 8C11.1642 8 11.5 8.33579 11.5 8.75C11.5 9.16421 11.1642 9.5 10.75 9.5Z"
            fill={themeColor}
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M4.75 12.5C4.33579 12.5 4 12.1642 4 11.75C4 11.3358 4.33579 11 4.75 11C5.16421 11 5.5 11.3358 5.5 11.75C5.5 12.1642 5.16421 12.5 4.75 12.5Z"
            fill={themeColor}
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M7.75 12.5C7.33579 12.5 7 12.1642 7 11.75C7 11.3358 7.33579 11 7.75 11C8.16421 11 8.5 11.3358 8.5 11.75C8.5 12.1642 8.16421 12.5 7.75 12.5Z"
            fill={themeColor}
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M10.75 12.5C10.3358 12.5 10 12.1642 10 11.75C10 11.3358 10.3358 11 10.75 11C11.1642 11 11.5 11.3358 11.5 11.75C11.5 12.1642 11.1642 12.5 10.75 12.5Z"
            fill={themeColor}
          />
        </Svg>
      ),
      [FamilyIconType.card]: (
        <Svg width="34" height="24" viewBox="0 0 34 24">
          <rect
            x="0.75"
            y="0.75"
            width="14.5"
            height="10.5"
            rx="1.25"
            stroke={themeColor}
            strokeWidth="1.5"
            fill="#fff"
          />
          <path d="M1.5 5H16.0238" stroke={themeColor} />
        </Svg>
      ),
      [FamilyIconType.face]: (
        <Svg width="32" height="34" viewBox="0 0 32 34">
          <circle cx="8" cy="8.60669" r="7.25" stroke={themeColor} strokeWidth="1.5" fill="#fff" />
          <path
            d="M6.15018 10.8684C6.44976 11.5952 7.16515 12.1067 8.00001 12.1067C8.82499 12.1067 9.5333 11.6072 9.83903 10.8941"
            stroke={themeColor}
            strokeWidth="1.5"
            strokeLinecap="round"
          />
          <path d="M4 7.60669H6" stroke={themeColor} strokeWidth="1.5" strokeLinecap="round" />
          <path d="M10 7.60669H12" stroke={themeColor} strokeWidth="1.5" strokeLinecap="round" />
        </Svg>
      ),
      [FamilyIconType.fingerVein]: (
        <Svg width="26" height="32" viewBox="0 0 26 32">
          <path
            d="M7.14129 7.69563V5.27036L7.1358 4.27036C7.07326 3.55846 6.58868 3 5.85714 3C5.12561 3 4.63397 3.57381 4.57143 4.28571V9.57143C4.11892 9.16192 3.20151 8.62612 2.65753 8.96485C2.03737 9.35101 1.82601 10.1414 2.15238 10.7779L4.48256 14.4949C4.49947 14.5247 4.51772 14.5538 4.53725 14.5819C4.63146 14.7179 4.89603 14.9314 4.89603 14.9314C5.11077 15.0646 5.37201 15.1429 5.65383 15.1429H10.1037C10.8354 15.1429 11.4286 14.6159 11.4286 13.9659V9.00512C11.4286 8.35509 10.8354 7.82813 10.1037 7.82813L7.14129 7.69563Z"
            stroke={themeColor}
            strokeWidth="1.5"
            fill="#fff"
            strokeLinejoin="round"
          />
          <path
            d="M2.01388 1C1.39208 1.54967 1 2.35327 1 3.24845C1 4.14199 1.39065 4.9443 2.01048 5.49389"
            stroke={themeColor}
            strokeLinecap="round"
          />
          <path
            d="M10 1C10.6218 1.54967 11.0139 2.35327 11.0139 3.24845C11.0139 4.14199 10.6232 4.9443 10.0034 5.49389"
            stroke={themeColor}
            strokeLinecap="round"
          />
        </Svg>
      ),
      [FamilyIconType.hand]: (
        <Svg width="30" height="32" viewBox="0 0 30 32">
          <path
            d="M12.6441 12.6365L12.6444 12.636L13.6168 5.33384H12.9943L13.6167 5.33231L13.6168 5.33297C13.6163 4.60396 13.0107 4.04461 12.3065 4.04461C11.9936 4.04461 11.7138 4.15492 11.5038 4.35547V3.33353C11.5038 2.66866 11.0125 2.04429 10.2449 2.04429C9.9063 2.04429 9.60755 2.17398 9.39641 2.41097C9.35574 2.18495 9.25941 1.96666 9.1001 1.78506C8.87398 1.5273 8.54908 1.37753 8.18334 1.37753C7.81553 1.37753 7.49046 1.52924 7.26683 1.79298C7.11676 1.96995 7.02728 2.17873 6.98711 2.39214C6.77529 2.18195 6.48175 2.04615 6.12178 2.04615C5.75131 2.04615 5.42581 2.20042 5.20549 2.47204C4.99751 2.72846 4.91797 3.04436 4.91797 3.33537V8.54393C4.91797 8.58235 4.9144 8.61267 4.90949 8.63622C4.88821 8.60682 4.86434 8.56989 4.83846 8.52407L4.8386 8.52399L4.83141 8.51192L3.76979 6.72786C3.76449 6.71795 3.75843 6.70725 3.75152 6.69597C3.74363 6.68257 3.73552 6.66934 3.72721 6.65629L3.71643 6.63818L3.71371 6.63554C3.54127 6.37583 3.28291 6.18724 2.97788 6.1051L2.97574 6.10453C2.6571 6.01995 2.31927 6.06409 2.03248 6.23089L2.03154 6.23143C1.46886 6.56001 1.24296 7.26552 1.45812 7.8588V7.87996L1.50358 7.96843C1.51057 7.98335 1.51786 7.99817 1.52545 8.01289L1.57922 8.11715L1.6166 8.19085C1.67941 8.31447 1.77719 8.50649 1.91842 8.7826C2.20083 9.33477 2.65702 10.2234 3.35458 11.5739C4.10086 13.0227 4.82828 13.7691 5.35563 14.1525C5.88477 14.5377 6.28588 14.6109 6.43103 14.621L6.45262 14.6225H6.47426H9.90572C11.3881 14.6225 12.2388 13.4203 12.6441 12.6365ZM4.88046 8.71176L4.88035 8.71178L4.88046 8.71176ZM3.65326 6.57325L3.21997 7.02016L3.75858 6.70932C3.75367 6.70103 3.74827 6.69236 3.74236 6.68342C3.72189 6.65246 3.69412 6.61656 3.65706 6.58063L3.69271 6.61518C3.68087 6.60138 3.66776 6.58731 3.65326 6.57325ZM2.07867 8.35003C2.08509 8.35003 2.08171 8.35018 2.07259 8.35003H2.07867ZM1.45812 7.73603C1.45794 7.72619 1.45812 7.72253 1.45812 7.7294V7.73603Z"
            stroke={themeColor}
            strokeWidth="1.5"
            fill="#fff"
          />
        </Svg>
      ),
    };
  }, []);
  return (
    <View
      style={{
        width: size,
        height: size,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      {icons[familyTypeMap[type]]}
    </View>
  );
};

export default FamilyIcon;
